<script setup>
import {onMounted, ref} from "vue";
import {datalist, getDataByCid, removeDataById, saveData} from '@/api/data'
import {Delete} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {getToken} from "@/utils/storage";

let addDataVisible = ref(false)
let list = ref([])
onMounted(() => {
  datalist().then(res => {
    list.value = res.data;
    console.log(list.value)
  })
})
const defaultProps = {
  children: 'childList',
  label: 'name',
}
let dataList = ref([])
let dialogVisible = ref(false)
let onData = (data) => {
  if (data.pId != 0) {
    //根据id查询学习资料并弹框
    getDataByCid(data.id).then(res => {
      dataList.value = res.data;
      dataList.value.id = data.id;
      dialogVisible.value = true
    })
  }
}
let removeById = (id) => {
  removeDataById(id).then(() => {
    ElMessage.success("删除成功!")
    dialogVisible.value = false
  })
}
let addData = (id) => {
  dialogVisible.value = false;
  addDataVisible.value = true;
  addDataBody.value.cId = id;
}
let addDataBody = ref(
    {
      cId: "",
      type: "",
      url: ''
    }
)
let uploadErr = () => {
  console.log("文件上传失败")
  ElMessage.error("文件上传失败")
}
let uploadSuccess = (res) => {
  console.log(res)
  if (res.code == 200) {
    addDataBody.value.url = res.data.url;
    addDataBody.value.type = res.data.type;
    ElMessage.success("文件上传成功！")
  } else {
    fileList.value = [];
    ElMessage.error(res.msg)
  }
}
let fileList = ref()
let save = () => {
  console.log(addDataBody.value)
  if (addDataBody.value.url.length == 0) {
    ElMessage.error("请选择上传文件！")
  } else {
    //   调用保存接口
    saveData(addDataBody.value).then(res => {
      ElMessage.success("保存成功！")
      addDataVisible.value = false
    })
  }
}
</script>

<template>
  <!--  添加学习资料对话框-->
  <div>
    <div>
      <el-dialog
          v-model="addDataVisible"
          title="添加学习资料"
          width="30%"
      >
        <!--        文件上窜-->
        <div>
          <el-upload
              v-model:file-list="fileList"
              :before-remove="beforeRemove"
              :headers="{'token':getToken()}"
              :limit="1"
              :on-error="uploadErr"
              :on-success="uploadSuccess"
              action="http://localhost:8080/api/file/uploadFile"
              drag
              multiple
          >
            <p>上传文件</p>
            <template #tip>
              <div>
                <div class="el-upload__tip">
                  只能上传 mp4、ppt、pdf文件且不能超过1个G
                </div>
              </div>
            </template>
          </el-upload>
        </div>


        <div style="margin-top: 30px">
          <span class="dialog-footer">
            <el-button @click="addDataVisible = false">关闭</el-button>
            <el-button @click="save">添加</el-button>
          </span>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
          v-model="dialogVisible"
          title="学习资料"
          width="30%"
      >
        <div>
          <el-table :data="dataList">
            <el-table-column #default="{row}" label="资料">
              <div v-if="row.type==0">
                <el-link :href="row.url">视频</el-link>
              </div>
              <div v-if="row.type==1">
                <el-link :href="row.url">pdf</el-link>
              </div>
              <div v-if="row.type==2">
                <el-link :href="row.url">ppt</el-link>
              </div>
            </el-table-column>
            <el-table-column #default="{row}" label="操作">
              <el-button :icon="Delete" size="small" type="danger" @click="removeById(row.id)"/>
            </el-table-column>

          </el-table>
          <div style="margin-top: 25px">
            <el-button @click="addData(dataList.id)">添加学习资料</el-button>
          </div>

        </div>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
        </template>
      </el-dialog>
    </div>

    <!--    主页面-->
    <div>
      <h1>学习资料管理</h1>
    </div>
    <el-tree :data="list" :props="defaultProps">
      <template #default="{ data }">
        <div>
          <el-link @click="onData(data)">
            {{ data.name }}
          </el-link>
        </div>
      </template>
    </el-tree>
  </div>

</template>

<style lang="scss" scoped>
</style>
